<template>
	<view class="header" style="z-index:2;position: relative;background-color: #FFFFFF;">
		<view class="search-station-container" style="z-index:2;position: relative;background-color: #FFFFFF;">
			<SearchStation></SearchStation>
		</view>
		<view style="display: flex;justify-content: space-around;position: relative;">
			<view 
				:style="'border-bottom: 1px #999 solid;z-index:2;position: relative;background-color: #FFFFFF;height:35px;flex:1;display: flex;align-items: center;justify-content:center;font-size: 11px;color:' + (currentActiveKey===item.key ? 'red' : '#000') + ';'" 
				v-for="item in selectTabList" 
				@tap="clickItem(item.key)">
				<view style="margin-right: 2px;">{{item.name}}</view>
				<view :style="'transform:rotate(' + (currentActiveKey===item ? '180' : '0') + 'deg);'">
					<u-icon name="arrow-down" size="12" bold color="inherit"></u-icon>
				</view>
			</view>
			<view :style="'width: 100%;background-color: #FFFFFF;transition: transform .2s;position: absolute;bottom: 0;transform: translateY('+(currentActiveKey=='city'?100 : 0)+'%);'">
				<view>还没写</view>
			</view>
			<view :style="'width: 100%;background-color: #FFFFFF;transition: transform .2s;position: absolute;bottom: 0;transform: translateY('+(currentActiveKey=='radius'?100 : 0)+'%);'">
				<view style="display: flex;align-items: center;">
					<view style="flex: 1">
						<u-slider :value="selectFromData.radius" @change="currentActiveKey = null" @changing="radiusChange" step="5" min="10" max="200"></u-slider>
					</view>
					<view style="width: 40px;">{{selectFromData.radius}}</view>
				</view>
				<!-- <slider value="60" @change="radiusChange" step="5" min="10" max="200"/> -->
			</view>
			<view :style="'width: 100%;background-color: #FFFFFF;transition: transform .2s;position: absolute;bottom: 0;transform: translateY('+(currentActiveKey=='sort'?100 : 0)+'%);'">
				<view
				v-for="item in ['综合排序','距离最近','评分最高']"
				@tap="selectFromData.sort = item;currentActiveKey = null"
				:style="'height: 30px;display: flex;align-items: center;border-bottom: 1px #999 solid;display: flex;justify-content: space-between;padding: 0 10px;color:' + (selectFromData.sort === item ? '#0f0' : '#000') +';'">
					<view>{{item}}</view>
					<u-icon v-if="selectFromData.sort === item" name="checkmark" size="16" bold color="inherit"></u-icon>
				</view>
			</view>
			<view :style="'width: 100%;background-color: #FFFFFF;transition: transform .2s;position: absolute;bottom: 0;transform: translateY('+(currentActiveKey=='filter'?100 : 0)+'%);'">
				<view>还没写</view>
			</view>
		</view>
	</view>
	
	
</template>

<script setup lang="ts">
	import SearchStation from '@/components/search-station.vue'
	import UIcon from 'uview-ui/components/u-icon/u-icon.vue'
	import USlider from 'uview-ui/components/u-slider/u-slider.vue'
	import { computed, reactive, ref } from 'vue';
	
	const currentActiveKey = ref(null)
	let timer
	function clickItem(key){
		clearTimeout(timer)
		if (currentActiveKey.value === key) {
			currentActiveKey.value = null
		} else if (currentActiveKey.value !== null){
			currentActiveKey.value = null
			timer = setTimeout(() => {
				currentActiveKey.value = key
			}, 150)
		} else {
			currentActiveKey.value = key
		}
	}
	
	function radiusChange(value: number) {
		selectFromData.radius = value
	}
	
	const selectFromData = reactive({
		city: '附近',
		radius: 20,
		sort: '综合排序',
		filter: []
	})
	
	
	const selectTabList = computed(() => {
		return [{name: '附近',key: 'city'},{name: `${selectFromData.radius}KM`,key: 'radius'},{name: selectFromData.sort,key: 'sort'},{name: '筛选',key: 'filter'}]
	})
	
	defineExpose({
		currentActiveKey,
		clickItem,
		selectTabList,
		selectFromData,
		radiusChange
	})
</script>

<style lang="scss">
page {
	height: 100vh;
	background-color: $u-bg-color;
}
</style>
<style lang="scss" scoped>
	.search-station-container {
		padding: 0 10px;
	}
	.header {
		background-color: #FFFFFF;
	}
</style>
